import React, { useEffect, useMemo } from 'react';
import { Form, Input, Row, Button, DatePicker, Space } from 'antd';
import Icon from '@/components/layout/Icon';
import dayjs from 'dayjs';
import { getQueryString } from '@/utils/tools';

const layout = {
  labelCol: { flex: '70px' },
  wrapperCol: { flex: '190px' },
};

const ProjectSearch = (props: any) => {
  const { handleFinish, handleReset, defaultValue } = props;
  const [form] = Form.useForm();

  const onSearch = (values) => {
    const params = { ...values };
    if (params.createAt) {
      params.createAt = dayjs(params.createAt).format('YYYY-MM-DD');
    }
    handleFinish(params);
  };

  const onReset = () => {
    form.resetFields();
    handleReset();
  };

  useEffect(() => {
    const author = getQueryString('name');
    if (author) {
      form.setFieldValue('author', author);
    }
  }, []);

  return (
    <div className="project-search">
      <Form colon={false} form={form} {...layout} onFinish={onSearch} layout="inline" style={{ marginBottom: '20px' }}>
        <Space>
          <Form.Item name="author" label="提交人员">
            <Input placeholder="请输入提交人" allowClear style={{ width: '200px' }} />
          </Form.Item>
          <Form.Item name="createAt" label="创建时间">
            <DatePicker placeholder="请选择创建时间" allowClear format="YYYY-MM-DD" style={{ width: '180px' }} />
          </Form.Item>
          <Form.Item style={{ flex: 'auto' }}>
            <Row>
              <Button onClick={onReset} style={{ marginRight: '10px' }}>
                重 置
              </Button>
              <Button type="primary" className="flex" htmlType="submit" icon={<Icon src="/images/search.png" width={16} height={16} style={{ marginRight: '4px' }} />}>
                查 询
              </Button>
            </Row>
          </Form.Item>
        </Space>
      </Form>
    </div>
  );
};

export default ProjectSearch;
